<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件化实现图文混合呈现</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div id="imageDesc"></div>
<script>
    var imageDesc = function (domId) {
        var sef = this, dom = document.getElementById(domId);
        function getHtml(param) {
//            判断出入的数据是否为空
            if (!param) {return;}
//            生成外部点击链接的代码
            var linksHtml = function (data) {
//                生成最外层ul容器
                var ul = '<ul class="social-links">';
                for (var i = 0; i < data.length; i++) {
                    var sub = data[i];//'+sub.ico+'
//                    代码拼装
                    ul+= '<li><a class="fa " target="_blank" href="' + sub.url + '">' + sub.des + '</a></li>';
                }
                ul += "</ul>";
                return ul;
            }(param.linksData);
//            生成图片显示文本
            var boxImage = '<div class="box-img"><img src="' + param.imgUrl + '"></div>';
//            文本标题
            var boxContentTitle = '<h4 class="title">' + param.title + '</h4>';
//            文本描述
            var boxContentDes = '<p  class="description">' + param.desc + '</p>';
//            生成文本描述内容
            var boxContent = '<div class="box-content">' + boxContentTitle + boxContentDes + linksHtml + '</div>';
//            封装单独的一个盒子，并添加子元素
            var box = '<div class="box"> ' + boxImage + boxContent + '</div>';
//            添加到页面指定的元素中
            dom.innerHTML += box;
        }
        function creatHtml() {
//            初始化，清空此元素下的所以元素
            dom.innerHTML="";
            for (var i = 0; i < sef.params.length; i++) {
                getHtml(sef.params[i]);
            }
        }
        sef.init = function (data) {
            sef.params = data;
            if(!sef.params||sef.params.length==0){return}
            creatHtml();
        }
    };
    var data = [
        {
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/2.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/3.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        },{
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/2.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/3.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        },{
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/2.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/3.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        },{
            imgUrl: "images/1.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/2.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }, {
            imgUrl: "images/3.jpg",
            title: "Duende",
            desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae libero orci." +
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed vestibulum.",
            linksData: [
                {url: "https://www.baidu.com", des: "QQ"},//,ico:"fa-qq"
                {url: "https://www.baidu.com", des: "微博"},//,ico:"fa-weibo"
                {url: "https://www.baidu.com", des: "微信"}//,ico:"fa-weixin"
            ]
        }];
    var demo= new imageDesc("imageDesc");
    demo.init(data);












</script>
</body>
</html>